import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  TextInput,
  Modal
} from 'react-native';

import NavBar from '../../../components/PublicHeader';
import Picker1 from './resource1/picker'
import Picker from './resource/picker'
import Picker2 from './resource2/picker'

import {
  socialEllipsis
} from '../../../utils/publicMethodList';

export default class socialCirclePromotion extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "社圈推广",
      // 自定义推荐默认值
      customRecomQ: false,
      // 自定义的人数
      inputText: "",
      // 自定义人数弹出框 默认值
      socialCircleIsModal: false,
      // 支付弹出框
      isModal: false,
      isflag: true,
      // 社圈推广数据
      socialDataList: {
        // 社圈详情数据列表
        socialDetailsData: [
          {
            socialCircleImage: '',
            informationTitle: "小区门口，芙蓉超市盛大开",
            informationSubtitle: "小何同学投放",
            informationTime: "2021-12-13",
            views: "16798",
          },
        ],
        // 推广多少人
        circleNumberofPeople:
          [
            {
              item: "500+",
              action: true
            },
            {
              item: "1000+",
              action: false
            },
            {
              item: "自定义",
              action: false
            }
          ],
        // 期望提升哪一项
        expectedImprovement:
          [
            {
              item: "社圈点赞量",
              action: false
            },
            {
              item: "社圈浏览量",
              action: true
            }
          ],
        // 推荐设置
        informationConuent: [
          {
            // 未选中状态
            actionNo: require('../../../assets/images/socialcircle/defaultSelectedState.png'),
            // 选中状态
            action: require('../../../assets/images/socialcircle/selectedStatus.png'),
            // 标题名
            item: "系统智能推荐",
            // 选中默认值
            actionD: true
          },
          {
            actionNo: require('../../../assets/images/socialcircle/defaultSelectedState.png'),
            action: require('../../../assets/images/socialcircle/selectedStatus.png'),
            item: "自定义定向推荐",
            actionD: false
          }
        ],
        // 性别
        mendationQGender: [
          {
            Gender: "不限",
            SelectedState: true
          },
          {
            Gender: "男",
            SelectedState: false
          },
          {
            Gender: "女",
            SelectedState: false
          }
        ],
        // 年龄段(多选)
        dationQAgeGroupr: [
          {
            AgeGroupr: "不限",
            SelectedState: true
          },
          {
            AgeGroupr: "18-23岁",
            SelectedState: false
          },
          {
            AgeGroupr: "24-30岁",
            SelectedState: false
          },
          {
            AgeGroupr: "31-40岁",
            SelectedState: false
          },
          {
            AgeGroupr: "41-50岁",
            SelectedState: false
          }
        ],
        // 兴趣标签（多选）
        dationQInterestTag: [
          {
            InterestTag: "不限",
            SelectedState: true
          },
          {
            InterestTag: "软件技术",
            SelectedState: false
          },
          {
            InterestTag: "软件技术",
            SelectedState: false
          },
          {
            InterestTag: "购物",
            SelectedState: false
          },
          {
            InterestTag: "软件技术",
            SelectedState: false
          }
        ],
        // 地区
        dationQRegion: [
          {
            Region: "全国",
            SelectedState: true
          },
          {
            Region: "按省市>",
            SelectedState: false
          },
          {
            Region: "按区县>",
            SelectedState: false
          },
          {
            Region: "按商圈>",
            SelectedState: false
          },
          {
            Region: "按附近>",
            SelectedState: false
          }
        ],
        putAmount: {
          putAmountMoney: "100",
          expectedRecommen: 0
        },
      },
    }
  }

  componentDidMount = () => {

  }
  // 期望推荐给多少人 切换数量
  numberofPeopleClick(item, index) {
    const {
      socialDataList,
      inputText
    } = this.state
    const circleNumberofPeople = socialDataList.circleNumberofPeople
    circleNumberofPeople.map((item, circleNumberIndex) => {
      this.setState({
        action: item.action = false
      })
      if (index == circleNumberIndex) {
        this.setState({
          action: item.action = !item.action,
        })
      }
    })
    if (item.item == "自定义") {
      this.setState({
        socialCircleIsModal: true
      })
    }
    if (item.item == "自定义") {
      this.setState({
        inputText: this.state.inputText = inputText
      })
    }

  }
  // 期望提升哪一项 切换
  expectedImprovementClick(index) {
    const {
      socialDataList
    } = this.state
    const expectedImprovement = socialDataList.expectedImprovement
    expectedImprovement.map((item, expectedIndex) => {
      this.setState({
        action: item.action = false,
      })
      if (index == expectedIndex) {
        this.setState({
          action: item.action = !item.action,
        })
      }
    })
  }
  // 把社圈推荐给潜在兴趣用户群体
  informationConuentClick(index) {
    const {
      socialDataList
    } = this.state
    const informationConuent = socialDataList.informationConuent
    informationConuent.map((item, ionConuentIndex) => {
      this.setState({
        actionD: item.actionD = false,
      })
      if (index == ionConuentIndex) {
        this.setState({
          actionD: item.actionD = !item.actionD,
        })
      }
    })
    // 判断自定义推荐框显示
    if (index == 1) {
      this.setState({
        customRecomQ: true
      })
    }
    // 判断自定义推荐框显示
    if (index == 0) {
      this.setState({
        customRecomQ: false
      })
    }
  }
  // 自定义性别单选
  mendationQGender(index) {
    const {
      socialDataList
    } = this.state
    const mendationQGender = socialDataList.mendationQGender
    mendationQGender.map((item, mendationQGenderIndex) => {
      this.setState({
        SelectedState: item.SelectedState = false
      })
      if (index == mendationQGenderIndex) {
        this.setState({
          SelectedState: item.SelectedState = !item.SelectedState
        })
      }
    })
  }

  // 年龄段 多选
  dationQAgeGroupr(item, index) {
    const {
      socialDataList
    } = this.state
    const dationQAgeGroupr = socialDataList.dationQAgeGroupr
    dationQAgeGroupr.map((item, dationQAgeGrouprIndex) => {
      if (item.AgeGroupr == "不限") {
        this.setState({
          SelectedState: item.SelectedState = false
        })
      }
      if (index == dationQAgeGrouprIndex) {
        this.setState({
          SelectedState: item.SelectedState = !item.SelectedState
        })
      }
    })
    if (item.AgeGroupr == "不限") {
      this.setState({
        SelectedState: item.SelectedState = !item.SelectedState
      })
    }
  }

  //  兴趣标签 多选 
  dationQInterestTag(item, index) {
    const {
      socialDataList
    } = this.state
    const dationQInterestTag = socialDataList.dationQInterestTag
    dationQInterestTag.map((item, dationQInterestTagIndex) => {
      if (item.InterestTag == "不限") {
        this.setState({
          SelectedState: item.SelectedState = false
        })
      }
      if (index == dationQInterestTagIndex) {
        this.setState({
          SelectedState: item.SelectedState = !item.SelectedState
        })
      }
    })
    if (item.InterestTag == "不限") {
      this.setState({
        SelectedState: item.SelectedState = !item.SelectedState
      })
    }
  }

  // 地域 多选
  dationQRegion(item, index) {
    const {
      socialDataList
    } = this.state
    const dationQRegion = socialDataList.dationQRegion
    dationQRegion.map((item, dationQRegionIndex) => {
      this.setState({
        SelectedState: item.SelectedState = false
      })
      if (index == dationQRegionIndex) {
        this.setState({
          SelectedState: item.SelectedState = !item.SelectedState
        })
      }
    })
  }

  onChangeText(inputText) {
    this.setState({
      inputText: inputText = inputText
    })
  }

  render() {
    const {
      socialDataList,
      customRecomQ,
      topTitle,
      isflag,
    } = this.state
    {/* 社圈信息区 */ }
    const socialCircleInformation =
      <>
        {socialDataList.socialDetailsData.map((item, index) => (
          <View style={styles.publicStyle} key={index}>
            <View style={styles.socialCircleInformation} >
              <Image
                style={styles.socialCircleImage}
                source={item.socialCircleImage}
              />
              <View style={styles.informationConuent}>
                <Text style={styles.informationTitle}>
                  {socialEllipsis(item.informationTitle)}
                </Text>
                <Text style={styles.informationSubtitle}>
                  {item.informationSubtitle}
                </Text>
                <View style={styles.rowTimeNumberbox}>
                  <Text style={styles.informationTime}>
                    {item.informationTime}
                  </Text>
                  <Text style={styles.verticalLine}>|</Text>
                  <Text style={styles.informationTime}>
                    {item.views}浏览
                  </Text>
                </View>
              </View>
            </View>
          </View>
        ))
        }
      </>
    {/* 期望推送多少人 */ }
    const circleNumberofPeople =
      <>
        <View style={styles.publicStyle}>
          <Text style={styles.informationTitle}>期望推荐给多少人？</Text>
          <View style={styles.circleNumberofPeople}>
            {socialDataList.circleNumberofPeople.map((item, index) => (
              <TouchableOpacity key={index}
                onPress={() => {
                  this.numberofPeopleClick(item, index)
                }}>
                <View style={item.action ?
                  styles.dationBoxAction : styles.dationBoxActionNo} >
                  <Text >{item.item}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
          {/* 期望提升哪一项？ */}
          <Text style={styles.informationTitle}>期望提升哪一项？</Text>
          <View style={styles.expectedImprovement}>
            {socialDataList.expectedImprovement.map((item, index) => (
              <TouchableOpacity key={index}
                onPress={() => {
                  this.expectedImprovementClick(index)
                }}>
                <View style={item.action ?
                  styles.improvemenAaction : styles.ImprovemenAactionNo} >
                  <Text >{item.item}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </>
    {/* 推荐设置区 */ }
    const informationConuent =
      <>
        <View style={styles.publicStyle}>
          <Text style={styles.informationTitle}>
            把社圈推荐给潜在兴趣用户群体
          </Text>
          <View style={styles.informationConuent}>
            {socialDataList.informationConuent.map((item, index) => (
              <TouchableOpacity key={index}
                onPress={() => {
                  this.informationConuentClick(index)
                }}>
                <View style={styles.row}>
                  <Image
                    style={styles.SelectedState}
                    source={item.actionD ?
                      item.action : item.actionNo}
                  />
                  <Text style={styles.dationBox}>{item.item}</Text>
                </View>
              </TouchableOpacity>
            ))}
            {/* 自定义推荐设置区 */}
            {customRecomQ ?
              <View style={styles.mendationQBox}>
                {/* 性别区域 单选 */}
                <View style={styles.mendationQGender}>
                  <Text style={styles.customDationQTitle}>性别(单选)</Text>
                  <View style={styles.Gender}>
                    {socialDataList.mendationQGender.map((item, index) => (
                      <TouchableOpacity key={index}
                        onPress={() => {
                          this.mendationQGender(index)
                        }}>
                        <View style={item.SelectedState ?
                          styles.dationBoxAction : styles.dationBoxActionNo} >
                          <Text >{item.Gender}</Text>
                        </View>
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>
                {/* 年龄段 多选 */}
                <View style={styles.dationQAgeGroupr}>
                  <Text style={styles.customDationQTitle}>年龄段(多选)</Text>
                  <View style={styles.AgeGroupr}>
                    {socialDataList.dationQAgeGroupr.map((item, index) => (
                      <TouchableOpacity key={index}
                        onPress={() => {
                          this.dationQAgeGroupr(item, index)
                        }}>
                        <View style={item.SelectedState ?
                          styles.dationBoxAction : styles.dationBoxActionNo} >
                          <Text >{item.AgeGroupr}</Text>
                        </View>
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>
                {/* 兴趣标签 多选 */}
                <View style={styles.dationQInterestTag}>
                  <Text style={styles.customDationQTitle}>兴趣标签(多选)</Text>
                  <View style={styles.InterestTag}>
                    {socialDataList.dationQInterestTag.map((item, index) => (
                      <TouchableOpacity key={index}
                        onPress={() => {
                          this.dationQInterestTag(item, index)
                        }}>
                        <View style={item.SelectedState ?
                          styles.dationBoxAction : styles.dationBoxActionNo} >
                          <Text >{item.InterestTag}</Text>
                        </View>
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>
                {/* 地域（多选） */}
                <View style={styles.dationQRegion}>
                  <Text style={styles.customDationQTitle}>地域(多选)</Text>
                  <View style={styles.Region}>
                    {socialDataList.dationQRegion.map((item, index) => (
                      <TouchableOpacity key={index}
                        onPress={() => {
                          this.dationQRegion(item, index)
                        }}>
                        {index == 1 ? <Picker1
                          Communitycommunication={item.Region}
                          Communitycommunications={item.SelectedState ?
                            styles.dationBoxAction : styles.dationBoxActionNo}
                          Communitycommunicationes={!item.SelectedState ?
                            styles.dationBoxAction : styles.dationBoxActionNo}
                        ></Picker1>
                          : <View style={item.SelectedState ?
                            styles.dationBoxAction : styles.dationBoxActionNo}
                          >
                            <Text >{item.Region}</Text>
                          </View> && index == 2 ? <Picker
                            Communitycommunication={item.Region}
                            Communitycommunications={item.SelectedState ?
                              styles.dationBoxAction : styles.dationBoxActionNo}
                            Communitycommunicationes={!item.SelectedState ?
                              styles.dationBoxAction : styles.dationBoxActionNo}
                          ></Picker>
                            : <View style={item.SelectedState ?
                              styles.dationBoxAction : styles.dationBoxActionNo}
                            >
                              <Text >{item.Region}</Text>
                            </View>
                              // 社圈选择器
                              && index == 3 ? <Picker2
                                Communitycommunication={item.Region}
                                Communitycommunications={item.SelectedState ?
                                  styles.dationBoxAction : styles.dationBoxActionNo}
                                Communitycommunicationes={!item.SelectedState ?
                                  styles.dationBoxAction : styles.dationBoxActionNo}
                              ></Picker2> : <View style={item.SelectedState ?
                                styles.dationBoxAction : styles.dationBoxActionNo} >
                              <Text >{item.Region}</Text>
                            </View>
                        }
                      </TouchableOpacity>
                    ))}
                  </View>
                </View>
              </View> : null}
          </View>
        </View>
      </>
    {/* 投放金额 优惠卷 */ }
    const putAmount =
      <>
        <View style={styles.publicStyle}>
          <View style={styles.putAmount}>
            <Text>投放金额</Text>
            <View style={styles.rowPutAmount}>
              <Text style={styles.putAmountTotal}>合计:</Text>
              <Text>￥{socialDataList.putAmount.putAmountMoney}</Text>
            </View>
          </View>
          <View style={styles.putAmountStyle}>
            <Text>优惠券</Text>
            <View style={styles.rowPutAmount}>
              <Text>{socialDataList.putAmount.expectedRecommen > 0 ?
                "有两张劵" : "无可用优惠券"}</Text>
              <Image
                style={styles.PutAmountImage}
                source={require('../../../assets/images/iconResources/returnBnt1.png')}
              />
            </View>
          </View>
        </View>
      </>
    // 同意支付协议
    const agreementTextRow =
      <View style={styles.agreementTextRow}>
        <Text style={styles.agreementText}>点击支付即同意</Text>
        <Text style={styles.agreementTextRight}>社圈推广协议</Text>
      </View>
    // 底部支付区
    const bottomTotalPrice =
      <View style={styles.bottomTotalPrice}>
        <Text style={styles.amountMoney}>
          ￥{socialDataList.putAmount.putAmountMoney}
        </Text>
        <TouchableOpacity onPress={() => {
          this.setState({
            isModal: true
          })
        }} style={styles.paymentButtonBox}>
          <Text style={styles.paymentButton}>支付</Text>
        </TouchableOpacity>
      </View>
    {/* 微信支付弹出框 */ }
    const payment =
      <>
        <Modal
          animationType='slide'
          transparent={true}
          visible={this.state.isModal}>
          <ScrollView style={styles.content}>
            <View style={styles.content_view}>
              <TouchableOpacity style={styles.content_remove}
                onPress={() => {
                  this.setState({
                    isModal: false
                  })
                }}>
                <Image source={require('../../../assets/images/maillist/shanchu.png')} />
              </TouchableOpacity>
              <View style={styles.view_tops}>
                <View>
                  <Text style={styles.tops_text}>
                    ￥{socialDataList.putAmount.putAmountMoney}.00
                  </Text>
                </View>
                <View>
                  <Text style={styles.tops_text2}>俊码星球推广</Text>
                </View>
              </View>
              <View style={styles.view_centers}>
                <View style={styles.centers_view}>
                  <Image style={styles.centers_img}
                    source={require('../../../assets/images/maillist/wx.png')} />
                  <Text style={styles.centers_text}>微信支付</Text>
                </View>
                <TouchableOpacity style={isflag ?
                  styles.centers_view3 : styles.centers_view2}
                  onPress={() => {
                    this.setState({
                      isflag: !isflag
                    })
                  }}>
                  <Image style={styles.view2_img}
                    source={require("../../../assets/images/iconResources/selectTheHook.png")} />
                </TouchableOpacity>
              </View>
              <TouchableOpacity style={styles.view_bottoms}
                onPress={() => {
                  this.props.navigation.push('promotionProgress'),
                    this.setState({
                      isModal: false
                    })
                }}>
                <Text style={styles.bottoms_text}>确定支付</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </Modal>
      </>
    {/* 自定义人数弹出框 */ }
    const socialCircleIsModal =
      <>
        <Modal
          animationType='fade'
          transparent={true}
          visible={this.state.socialCircleIsModal}>
          <View style={styles.socialCircleIsModal}>
            <View style={styles.numberofIsModalBox}>
              <View style={styles.numberofIsModalIcon}>
                <TouchableOpacity onPress={() => {
                  this.setState({
                    socialCircleIsModal: false
                  })
                }}>
                  <Image source={require('../../../assets/images/maillist/shanchu.png')} />
                </TouchableOpacity>
              </View>
              <View style={styles.IsModalInputBox}>
                <Text style={styles.numberofText}>自定义人数</Text>
                <TextInput
                  placeholder='请输入自定义人数'
                  style={styles.IsModalInput}
                  onChangeText={inputText =>
                    this.onChangeText(inputText)}
                />
                <View style={styles.socialCircleTextBox}>
                  <Text style={styles.socialCircleText}>最低为100</Text>
                </View>
                <TouchableOpacity onPress={() => {
                  this.setState({
                    socialCircleIsModal: false
                  })
                }}>
                  <View style={styles.IsModalBtnBox}>
                    <Text style={styles.IsModalBtn}>确定</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </>
    return (
      <View style={styles.warper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={topTitle}
          titleColor={"#333"}
          style={{ backgroundColor: "#fff" }}

        />
        <ScrollView>
          <View style={styles.promotionWarper}>
            {/* 社圈信息区 */}
            {socialCircleInformation}
            {/* 期望推送多少人 */}
            {/* 期望提升哪一项？ */}
            {circleNumberofPeople}
            {/* 推荐设置区 */}
            {informationConuent}
            {/* 投放金额 优惠卷 */}
            {putAmount}
            {/* 同意支付协议 */}
            {agreementTextRow}
          </View>
        </ScrollView>
        {/* 底部支付区 */}
        {bottomTotalPrice}
        {/* 底部支付按钮弹出框 */}
        {payment}
        {/* 自定义人数弹出框 */}
        {socialCircleIsModal}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warper: {
    flex: 1
  },
  promotionWarper: {
    paddingLeft: 15,
    paddingRight: 15,
    marginBottom: 100
  },
  publicStyle: {
    paddingLeft: 17,
    paddingRight: 17,
    paddingTop: 5,
    paddingBottom: 10,
    backgroundColor: "#fff",
    borderRadius: 10,
    marginTop: 15
  },
  socialCircleInformation: {
    flexDirection: "row",
    alignItems: "center"
  },
  socialCircleImage: {
    width: 66,
    height: 66,
    borderRadius: 5,
    marginRight: 16
  },
  informationConuent: {
    flexDirection: "column",
    justifyContent: "space-between"
  },
  informationTitle: {
    fontSize: 16,
    color: "#333",
    marginTop: 10,
    marginBottom: 10
  },
  informationSubtitle: {
    color: "#999",
    fontSize: 13
  },
  rowTimeNumberbox: {
    flexDirection: "row",
    alignItems: "center"
  },
  verticalLine: {
    marginLeft: 10,
    marginRight: 10,
    color: "#999"
  },
  informationTime: {
    color: "#9999",
    fontSize: 13
  },
  circleNumberofPeople: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  expectedImprovement: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  dationBoxActionNo: {
    height: 30,
    fontSize: 12,
    paddingLeft: 20,
    paddingRight: 20,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    backgroundColor: "#fff",
    borderWidth: 1,
    marginRight: 10,
    marginBottom: 10,
    borderColor: "#888888"
  },
  dationBoxAction: {
    height: 30,
    fontSize: 12,
    paddingLeft: 20,
    paddingRight: 20,
    flexDirection: "column",
    textAlign: "center",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    marginRight: 10,
    marginBottom: 10,
    backgroundColor: "#E1F0FF"
  },
  improvemenAaction: {
    height: 30,
    fontSize: 12,
    paddingLeft: 20,
    paddingRight: 20,
    flexDirection: "column",
    textAlign: "center",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    marginRight: 10,
    marginBottom: 10,
    backgroundColor: "#E1F0FF"
  },
  ImprovemenAactionNo: {
    width: 100,
    height: 30,
    fontSize: 12,
    paddingLeft: 10,
    paddingRight: 10,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    backgroundColor: "#fff",
    borderWidth: 1,
    marginRight: 10,
    marginBottom: 10,
    borderColor: "#888888"
  },
  row: {
    flexDirection: "row",
    marginBottom: 10,
    alignItems: "center"
  },
  SelectedState: {
    width: 15,
    height: 15
  },
  mendationQBox: {
    marginTop: 5
  },
  mendationQGender: {
  },
  Gender: {
    flexDirection: "row",
    flexWrap: "wrap"

  },
  AgeGroupr: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  InterestTag: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  Region: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  customDationQTitle: {
    color: "#666",
    fontSize: 14,
    marginBottom: 10
  },
  putAmount: {
    height: 50,
    borderBottomColor: "rgba(0, 0, 0, 0.1)",
    borderBottomWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  putAmountStyle: {
    height: 50,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  rowPutAmount: {
    flexDirection: "row",
    alignItems: "center"
  },
  putAmountTotal: {
    marginRight: 10
  },
  PutAmountImage: {
    width: 10,
    height: 20,
    marginLeft: 7
  },
  dationBox: {
    marginLeft: 10
  },
  mendationQBox: {
    marginLeft: 20,
    marginTop: 10
  },
  recommendedSettingArea: {
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 10
  },
  putAmountCouponArea: {
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 10
  },
  agreementText: {
    color: "#999",
    fontSize: 12,
    marginTop: 10,
    textAlign: "center"
  },
  agreementTextRight: {
    color: "#1890FF",
    fontSize: 12,
    marginTop: 10,
    textAlign: "center",
    marginLeft: 5
  },
  agreementTextRow: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 10
  },
  bottomTotalPrice: {
    paddingTop: 20,
    paddingLeft: 15,
    paddingRight: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    height: 80,
    width: "100%",
    position: "absolute",
    bottom: 0,
    left: 0,
    backgroundColor: "#fff"
  },
  amountMoney: {
    color: "#FF3636",
    fontSize: 20
  },
  paymentButtonBox: {
    width: 90,
    height: 30,
    borderRadius: 6,
    backgroundColor: "#1890FF",
    justifyContent: "center",
    alignItems: "center"

  },
  paymentButton: {
    color: "#fff",
    fontSize: 15
  },
  content: {
    backgroundColor: '#74747469',
    flexDirection: 'column-reverse'
  },
  content_view: {
    backgroundColor: '#fff',
    padding: 15,
  },
  content_remove: {
    width: 30
  },
  view_tops: {
    display: 'flex',
    flexDirection: 'column',
    alignSelf: 'center',
    justifyContent: 'center',
    borderBottomWidth: 1,
    width: '100%',
    padding: 10,
    borderBottomColor: '#f2f2f2'
  },
  tops_text: {
    fontSize: 40,
    textAlign: 'center'
  },
  tops_text2: {
    textAlign: 'center',
    fontSize: 17,
    color: '#999999',
    marginTop: 10
  },
  view_centers: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 30
  },
  centers_view: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  centers_view2: {
    width: 20,
    height: 20,
    borderWidth: 1,
    borderRadius: 20,
    marginVertical: 15
  },
  centers_view3: {
    width: 20,
    height: 20,
    borderRadius: 20,
    marginVertical: 15,
    backgroundColor: '#FF3636'
  },
  view2_img: {
    marginTop: 4,
    marginLeft: 4
  },
  centers_img: {
    width: 50,
    height: 50
  },
  centers_text: {
    fontSize: 25,
    textAlignVertical: 'center',
    marginLeft: 20,
  },
  view_bottoms: {
    backgroundColor: '#1890FF',
    marginTop: 100,
    padding: 15,
    borderRadius: 30
  },
  bottoms_text: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 19,
    textAlignVertical: 'center'
  },
  socialCircleIsModal: {
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center"
  },
  numberofIsModalBox: {
    width: 300,
    height: 350,
    backgroundColor: "#fff",
    borderRadius: 10,
    paddingLeft: 17,
    paddingRight: 5,
    paddingTop: 7
  },
  numberofIsModalIcon: {
    flexDirection: "row-reverse"
  },
  IsModalInputBox: {
    // flexDirection: "column",
    // alignItems: "center",
    paddingRight: 14
  },
  numberofText: {
    textAlign: "center",
    fontSize: 20
  },
  IsModalInput: {
    width: "100%",
    borderRadius: 10,
    fontSize: 13,
    paddingLeft: 10,
    backgroundColor: "#E9E9E9",
    marginTop: 20,
    marginBottom: 20
  },
  socialCircleTextBox: {
    textAlign: "left",
  },
  socialCircleText: {
    color: "#999",
    fontSize: 13
  },
  IsModalBtnBox: {
    width: "100%",
    height: 40,
    backgroundColor: "#1890FF",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 18
  },
  IsModalBtn: {
    color: "#fff",
    fontSize: 16,
  },
})
